<template>
	<view class="profile-container">
		<image class="profile-bg" src="/static/bg2.png" mode="aspectFill" />
		<view class="profile-content">
			<!-- 用户信息卡片 -->
			<view class="user-card">
				<view class="user-info">
					<image class="avatar" src="/static/avatar.png" mode="aspectFill"></image>
					<view class="info-content">
						<view class="title-row">
							<text class="title">与塔同行</text>
							<view class="badge">
								<image class="badge-icon" src="/static/my/badge.svg" mode="aspectFit"></image>
								<text class="badge-text">签约裁判</text>
							</view>
						</view>
						<view class="user-detail">
							<image class="verify-icon" src="/static/my/v.svg" mode="aspectFit"></image>
							<text class="detail-text">实名馆主 张小天 </text>
							<text class="detail-id">ID:961420</text>
						</view>
					</view>
					<image class="arrow-icon" src="/static/my/arrow.svg" mode="aspectFit"></image>
				</view>
				<view class="user-hr"></view>
				<view class="stats-card">
					<text class="stats-title">中式八球</text>
					<view class="stats-row">
						<view class="stat-item">
							<text class="stat-label">参赛次数</text>
							<text class="stat-value">7</text>
						</view>
						<view class="stat-item">
							<text class="stat-label">获奖次数</text>
							<text class="stat-value">5</text>
						</view>
						<view class="stat-item">
							<text class="stat-label">档位</text>
							<view class="rank-badge">
								<image src="/static/my/level.svg" />
								<text class="rank-value">8</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 功能按钮 -->
			<view class="action-buttons">
				<view class="action-btn" @click="handlePublish">
					<view class="btn-icon publish-icon">
						<image src="/static/my/post.svg" mode="aspectFit"></image>
					</view>
					<view class="btn-content">
						<text class="btn-title">我的发布</text>
						<text class="btn-subtitle">查看发布记录</text>
					</view>
				</view>
				<view class="action-btn" @click="handlePublic">
					<view class="btn-icon public-icon">
						<image src="/static/my/star.svg" mode="aspectFit"></image>
					</view>
					<view class="btn-content">
						<text class="btn-title">我的公会</text>
						<text class="btn-subtitle">查看公会成员</text>
					</view>
				</view>
			</view>

			<!-- 菜单列表 -->
			<view class="menu-list">
				<view class="menu-item" @click="handleUnread">
					<image class="menu-icon" src="/static/my/msg.svg" mode="aspectFit"></image>
					<text class="menu-text">未读消息</text>
					<image class="menu-arrow" src="/static/my/arrow.svg" mode="aspectFit"></image>
				</view>
				<view class="menu-item" @click="handleStats">
					<image class="menu-icon" src="/static/my/data.svg" mode="aspectFit"></image>
					<text class="menu-text">数据统计</text>
					<image class="menu-arrow" src="/static/my/arrow.svg" mode="aspectFit"></image>
				</view>
				<view class="menu-item" @click="handleJudge">
					<image class="menu-icon" src="/static/my/judge.svg" mode="aspectFit"></image>
					<text class="menu-text">裁判主页</text>
					<image class="menu-arrow" src="/static/my/arrow.svg" mode="aspectFit"></image>
				</view>
				<view class="menu-item" @click="handleMerchant">
					<image class="menu-icon" src="/static/my/shop.svg" mode="aspectFit"></image>
					<text class="menu-text">商户管理</text>
					<image class="menu-arrow" src="/static/my/arrow.svg" mode="aspectFit"></image>
				</view>
				<view class="menu-item" @click="handleAbout">
					<image class="menu-icon" src="/static/my/about.svg" mode="aspectFit"></image>
					<text class="menu-text">关于平台</text>
					<image class="menu-arrow" src="/static/my/arrow.svg" mode="aspectFit"></image>
				</view>
				<view class="menu-item" @click="handleAgreement">
					<image class="menu-icon" src="/static/my/user.svg" mode="aspectFit"></image>
					<text class="menu-text">用户协议</text>
					<image class="menu-arrow" src="/static/my/arrow.svg" mode="aspectFit"></image>
				</view>
			</view>

			<!-- 退出登录按钮 -->
			<view class="logout-btn" @click="handleLogout">
				<text class="logout-text">退出登录</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'

// 功能按钮点击事件
const handlePublish = () => {
	console.log('我的发布')
}

const handlePublic = () => {
	console.log('我的公会')
}

// 菜单点击事件
const handleUnread = () => {
	console.log('未读消息')
}

const handleStats = () => {
	console.log('数据统计')
}

const handleJudge = () => {
	console.log('裁判主页')
}

const handleMerchant = () => {
	console.log('商户管理')
}

const handleAbout = () => {
	console.log('关于平台')
}

const handleAgreement = () => {
	console.log('用户协议')
}

const handleLogout = () => {
	console.log('退出登录')
}
</script>

<style lang="scss" scoped>
.profile-container {
	min-height: 100vh;
	background: #F5F6F8;
	padding-bottom: 66rpx;

	.profile-bg {
		width: 100%;
		height: 411rpx;
	}

	.profile-content {
		padding: 0 28rpx;
		margin-top: -172rpx;
		position: relative;
	}

	// 用户信息卡片
	.user-card {
		height: 320rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;

		.user-info {
			display: flex;
			align-items: center;
			padding: 20rpx 20rpx 26rpx 32rpx;

			.avatar {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				margin-right: 24rpx;
			}

			.info-content {
				flex: 1;

				.title-row {
					display: flex;
					align-items: center;
					margin-bottom: 8rpx;

					.title {
						font-size: 40rpx;
						color: #303133;
						line-height: 52rpx;
						margin-right: 12rpx;
					}

					.badge {
						display: flex;
						align-items: center;
						background: #F1EFFF;
						border-radius: 120rpx 120rpx 120rpx 120rpx;
						padding: 0 16rpx;
						height: 44rpx;

						.badge-icon {
							width: 34rpx;
							height: 40rpx;
							margin-right: 8rpx;
						}

						.badge-text {
							font-size: 24rpx;
							color: #3813CD;
							line-height: 36rpx;
						}
					}
				}

				.user-detail {
					display: flex;
					align-items: center;

					.verify-icon {
						width: 28rpx;
						height: 28rpx;
						margin-right: 8rpx;
					}

					.detail-text,
					.detail-id {
						font-size: 26rpx;
						color: #606266;
						line-height: 40rpx;
					}

					.detail-text {
						margin-right: 24rpx;
					}
				}
			}

			.arrow-icon {
				width: 48rpx;
				height: 48rpx;
			}
		}

		.user-hr {
			height: 1rpx;
			background: #EBEEF5;
		}
	}

	// 统计数据卡片
	.stats-card {
		padding: 0 28rpx;
		margin-top: 14rpx;

		.stats-title {
			font-size: 30rpx;
			color: #303133;
			line-height: 44rpx;
		}

		.stats-row {
			display: flex;
			align-items: end;
			gap: 0 100rpx;

			.stat-item {
				display: flex;
				align-items: end;

				.stat-label {
					font-size: 26rpx;
					color: #999;
					line-height: 56rpx;

				}

				.stat-value {
					font-size: 48rpx;
					color: #303133;
					margin-left: 12rpx;
					line-height: 68rpx;
				}

				.rank-badge {
					width: 47rpx;
					height: 47rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					position: relative;
					margin-left: 14rpx;
					position: relative;
					top: -10rpx;

					image {
						position: absolute;
						left: 0;
						top: 0;
						width: 47rpx;
						height: 47rpx;
					}

					.rank-value {
						font-size: 31rpx;
						color: #FFFFFF;
						position: relative;
						margin-left: 4rpx;
					}
				}
			}
		}
	}

	// 功能按钮
	.action-buttons {
		display: flex;
		margin: 24rpx 0;
		background: #fff;
		border-radius: 16rpx 16rpx 16rpx 16rpx;

		.action-btn {
			flex: 1;
			border-radius: 24rpx;
			padding: 24rpx 28rpx;
			display: flex;
			align-items: center;

			.btn-icon {
				width: 96rpx;
				height: 96rpx;
				border-radius: 50%;
				margin-right: 16rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.btn-content {
				display: flex;
				flex-direction: column;

				.btn-title {
					font-size: 30rpx;
					color: #303133;
					line-height: 44rpx;
					margin-bottom: 4rpx;
				}

				.btn-subtitle {
					font-size: 22rpx;
					color: #909399;
					text-align: justified;
				}
			}
		}
	}

	// 菜单列表
	.menu-list {
		background: #fff;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin-bottom: 72rpx;
		padding: 24rpx 20rpx 24rpx 30rpx;

		.menu-item {
			display: flex;
			align-items: center;
			height: 96rpx;

			&:last-child {
				border-bottom: none;
			}

			.menu-icon {
				width: 46rpx;
				height: 46rpx;
				margin-right: 16rpx;
			}

			.menu-text {
				flex: 1;
				font-size: 30rpx;
				color: #303133;
				line-height: 44rpx;
			}

			.menu-arrow {
				width: 48rpx;
				height: 48rpx;
			}
		}
	}

	// 退出登录按钮
	.logout-btn {
		height: 80rpx;
		background: #E4E7ED;
		border-radius: 200rpx 200rpx 200rpx 200rpx;
		text-align: center;

		.logout-text {
			font-size: 30rpx;
			color: #606266;
			line-height: 80rpx;
		}
	}
}
</style>